用VSCode打造宇宙最强Markdown编辑器【VSCode篇】vscode+MPE插件+PigGo图床+最佳实践+使用技巧 |
您所在的位置:网站首页 › vscode markdown插件 › 用VSCode打造宇宙最强Markdown编辑器【VSCode篇】vscode+MPE插件+PigGo图床+最佳实践+使用技巧 |
程序员健身是为了保养还是保命?参与话题讨论赢好礼 >>>![]() 在昨天,简单写了一下Markdown,并学习了CSDN的Markdown扩展语法,让我们离用Markdown写博客的目标更近了一步。今天开始打造Markdown编辑工具,以帮助我们更好的写博客。这篇全程指导将会分几篇陆续推出,通过VS Code编辑器的安装和设置技巧、VS Code的Markdown相关插件的使用,通过九牛云+图床神器PicGo插件给博客设置图床,VS Code写Markdown的最佳实践总结、在CSDN写博客的一些经验技巧 及 Git版本控制等功能和技巧等几个部分,详细指导和讲解利用VS Code + 插件,打造 宇宙最强 Markdown编辑器的全过程。 用VSCode打造宇宙最强Markdown编辑器【VSCode篇】 一、初识宇宙最强VSCode编辑器 二、 VSCode到底强在哪儿 三、VSCode的安装设置概述 四、安装完成后的简单配置 五、VSCode的常用快捷键及特殊按法Windows 平台上好用的 Markdown 编辑器相对还是比较少的。如果需要免费的,那选择范围就更加小。但是写博客,要跟得上时代脚步,而且技术博客这件事本来就有装X的因素,虽然只是用简单的Markdown编辑,但是姿势一定很重要。因此,用号称宇宙最强的VS Code编辑器以Markdown语法写技术博客,通过合理设置,将VS Code 通过几个简单环节DIY打造成 Markdown 的编辑神器,搭建一个神级的博客写作平台,成为有追求的技术宅的不二选择。例如本篇文章,作者就是在这个宇宙最强VS Code平台上使用markdown完成的写作。作为博主,掏心掏肺给你说,这款VS Code的Markdown编辑神器,你值得拥有! 好了,首先让我们先来认识一下大名鼎鼎的VS Code到底是个什么东东。 一、初识宇宙最强VSCode编辑器VS Code全称Visual Studio Code,是微软公司旗下产品。2015年,微软开源了 Visual Studio Code 这一轻量级的但是功能强大的代码编辑器,赋予它免费、开源、跨平台的新定位,并在2015 年 4 月 29 日的 Build 大会上,发布了 Visual Studio Code 第一个预览版本。这样算来,与众多历史悠久的各大编辑器相比,从诞生到现在,VS Code只用了短短5年的时间,就在代码编辑器这个领域异军突起、高速成长。尤其在近两三年,VS Code的市场占有率急速飙升,将其他的同类编辑器产品远远的抛在了身后。 在Stack Overflow的2018年开发者调查中,VS Code已经成为最受欢迎的开发工具。 2019 年 2 月,在 PYPL Top IDE index 的排名中,VS Code 的涨势迅猛,在所有编辑器与 IDE(集成开发环境) 的评比中排名第六,领先于其他所有主流的代码编辑器:例如大名鼎鼎的Sublime、Atom 和 Vim 等等。可以说是已经在代码编辑器中拔得了头筹。 程序员之间对VS Code仅仅是一个编辑器还是一个IDE集成开发环境虽然一直有争论,微软对VS Code的定义却一直是: “Visual Studio Code is a lightweight but powerful source code editor”。但是,随着VS Code的越来越流行,基于VS Code的开源、跨平台特性、以及强大的API支持,使得VS Code的功能全面、适用性广,VS Code的社区非常活跃,通过VS Code产品自然而然的形成了一个生机勃勃的平台生态,同时开发出了超过一万的VS Code Extensions。基于这个生态,程序员可以用VS Code做任何事情,而不仅仅是用它来写代码了。比如: 编写程序代码,智能提醒和校验 用内置的Terminal终端快速的运行命令行 通过下载Debug插件,设置断点,轻松调试程序代码 使用内置Git功能管理程序源代码,进行版本控制 其他诸如看小说、读新闻、听歌。。。 在这个生态的支撑下,不论你想让它实现哪种功用、支持哪种语言,都可以找到相应的插件、或者插件合集,轻松的下载安装,愉快的用VSCode展开新的旅途。而且,几乎整个的开发过程都可以在VS Code这一个工具中完成。有了最多的用户群、无数的免费扩展插件、以及良好的用户体验,VS Code真正做到了重新定义代码编辑器,它也同时被被喜爱它的人们认为是宇宙最强的代码编辑器产品。 二、 VSCode到底强在哪儿作为一款代码编辑神器,它具有很多优点,从而避免了其他编辑器产品的缺陷,举例说: 1. 开源且免费 开源对于一个产品的长期发展极为重要。与闭源的Sublime 、开源的Vim 和 Atom 相比, VS Code 可以说是开源做的最好的。 VS Code 不仅仅是把代码开源出来。而是把整个产品的开发过程建立于开源之上,与整个社区深入合作,倾听用户在 GitHub 上的反馈,使 VS Code 越做越好: 每一年,VS Code 团队都会在 GitHub Wiki 发布 Roadmap ,列出一整年的规划图。 每个月初,在产品设计阶段,VS Code 团队会在 GitHub Issue 上会发布 Iteration Plan ,列出这个月会做的每一个功能,每一个功能基本会对应一个 GitHub Issue,你可以看到详细的设计以及 mockup,并且可以提出你自己的见解。 每个月末,临近产品发布,你可以在 GitHub 看到 Endgame 了解到 VS Code 是如何进行产品测试与发布的。 不仅代码开源,VS Code 整个产品的计划,设计以及发布管理都是“开源”的:每一个阶段对每一个用户是公开透明的,你不仅可以开 Issue,发PR,你甚至也可以参与到每个功能的设计与讨论中去。 2. 性能好内存占用低 天下武功唯快不破。在转投到 VS Code 的童鞋中,很多就是因为对 VS Code 的性能情有独钟的。作为一个集成了各种功能的代码编辑神器,其在使用中表现的高性能、低占用和流畅的用户体验,让大家都赞不绝口。通过良好的性能表现,碾压多款同类产品,获得了广泛的认可。 同为基于 Electron 开发的产品,VS Code 在性能的优化上要比 Atom 领先许多; 从插件进程与主进程的隔离、插件的延迟加载,再到 Text Buffer 的优化,提升大文件的加载与编辑速度,减少内存使用率 VS Code 仍然不断在进行优化和提升,让大家不断看到它在性能方面的进步。 3. 使用简单,开箱即用,用户体验好 VS Code 提供开箱即用的良好用户体验。与 Vim、Sublime 和 Atom 等流行的编辑器一样,VS Code 都提供了非常好的代码编辑体验。此外,VS Code 在保持其轻量级代码编辑器的前提下,还不断丰富IDE中才会有的重要功能,比如: Terminal:内置的 Terminal 使得开发者可以直接在 VS Code 中快速地运行脚本,而不需要在 VS Code 和系统的 Terminal 之间来回切换。 调试器:直接在 VS Code 中调试代码,断点、call stacks、交互式的 debug console,使得调试变得异常轻松。 版本控制:开箱即用的 Git 支持,让你方便地进行文件更改比较,管理你的源代码。特别是对于前端开发者来说,VS Code 有着非常好的支持。 前端功能支持:除了JavaScript 的智能提示、重构、调试等功能支持外,像 HTML, CSS, SCSS, Less 和 JSON 这些前端技术栈,都有着很棒的支持。 而且VS Code 在用户体验方面也一致在不断改进。比如,VS Code 的设置页面就没有图形化的配置界面,但它基于用户的意见反馈,增加了图形化的配置界面,同时也保留了基于 JSON 文件的配置方式,满足了不同人群的使用习惯。 4. 融入开源社区,插件扩展丰富 VS Code很好的融入了开源社区,并能快速响应需求,同时把许多重要组件抽离出来,成为大家都可以复用的开源产品,与社区合作,把产品越做越好。因此,VS Code 已经不仅仅是一个代码编辑器,它还有着丰富且快速增长的插件生态。随着VS Code插件生态的不断发展,如今仅在在 Visual Studio Marketplace中,就已经有了上万个VS Code插件。而且,VS Code 建立了中心化的插件市场,在 VS Code 编辑器里就可以轻松搜索插件,实现一键安装与管理。此外,VS Code 还推出了 Extension Packs,方便开发者一键安装多个插件。比较出色的 Extension Pack 有 Java Extension Pack、PHP Extension Pack、Vue.js Extension Pack 等,使得 VS Code 真正实现秒变 IDE。 三、VSCode的安装设置概述作为宇宙第一的Visual Studio Code编辑器,可不仅仅能在软件开发专业领域使用,它的功能强大、适用性广,能干各种各样的事情,写Markdown文档更是小菜一碟。不过,为了能够打造用Markdown写博客的最佳环境,首先我们需要把它装起来,然后简单做一下必要的设置,一个超级Markdown编辑器就可以DIY完成了。我们先看看如何安装VS Code。 VS Code的安装非常简单,各步骤操作如下: 下载VS Code并安装 首先登陆 Visual Studio Code 的官网 https://code.visualstudio.com ,如下图:Visual Studio Code 下载安装后,界面是英文的,不能直接切换成中文包,但我们可以使用中文插件,来提高 Visual Studio Code 的使用体验, VS Code有一个丰富的 VS Code 开源免费插件生态,在软件内部通过简单的插件查找即可在上万个VS Code插件中轻松查找选择,当我们找到一个合适的VS Code插件后,安装也非常简单。通常情况下,我们只要在搜索栏里填入相关信息,搜索插件的名称,当找到需要的插件后,直接点击插件右下角的“安装”即可安装完成。以安装中文语言插件为例,操作方法如下: VS Code安装插件时,按快捷键Ctrl + Shift + X ,也可以点击左侧工具栏“扩展(Extensions)”按钮,调出插件面板 在查找文字输入框中,输入“chinese”快速过滤并定位到“Chinese(Simplified) Language Pack for Visual Stidio Code”这个插件 VS Code提供开箱即用的用户体验,且原生支持Markdown(具体来说是只有比较基本的Markdown语法标记可以识别), 因此安装完成后,不用配置即可直接用VS Code作为Markdown编辑器正常进行编辑了。当然,你只要是肯花一点时间进行简单的设置,并安装一个专门的Markdown插件扩展Markdown的编辑功能,就会获得更好的体验。一般主要是选择一个浅色主题,更换一个中文字体和选择一个Markdown预览的CSS就可以了。 更换浅色背景主题默认的深色背景适合写代码,不适合写大篇幅的中文文本,所以安装了一个浅色背景的主题非常重要。关于主题的样式,因为我比较喜欢把背景设置为灰色,选择了“Github Light Theme”这个主题中的灰色系,更换主题很简单,主要是安装插件。 VS Code安装插件时,按快捷键Ctrl + Shift + X ,也可以点击左侧工具栏“扩展(Extensions)”按钮,调出插件面板 在查找文字输入框中,输入“Github Light Theme”快速过滤并定位到“Github Light Theme”这个插件 选择最右边的那个下载按钮,自动下载安装。 插件安装完成后,最后会让你选择用哪个色系,如下图 > 更多的主题插件,大家可以参考下面这篇博客,或者网上搜一下其它自己喜欢的VS Code主题插件即可。 >>> 10个漂亮的VSCode浅色(Light)主题 配置中文默认字体VS Code的缺省字体是等宽的英文字体,因为编辑器大部分的考虑都是为了方便写代码的和看代码,换成中文编辑后,对大段落中文的显示效果并不是非常好, 如果你使用的是windows系统,可以换成“微软雅黑”字体,就会显的舒服很多。具体方法: 选择右下角的“设置(settings)”打开设置面板 搜索“Editor: Font Family”,如下图,其中第二个就是中文字体 将设置由“Consolas, 'Courier New', monospace”改为“Consolas, '微软雅黑', monospace”,即可把中文字体从宋体改成了“微软雅黑”,中文字体对比之前会好很多,尤其是斜体等情况时,感觉顺眼多了。 当然,你也可以修改一下字体的大小,把“editor.fontSize”的取值,在15-18之间试一下,看哪一个看起来更舒服。 > 如果你的操作系统没有你喜欢的字体,也可以先在网上下载字体文件,再设置。 其它常用的设置优化(手工settings.json)我们还可以根据自己的使用习惯,修改VS Code的一些基础设置。让我们的编辑器更好用,这里就不一一演示了。 对于这些设置,更迅速的当然是直接在settings.json中手动进行修改,这里仅根据使用习惯举例一二,如下。 关闭标签介绍信息 我们在编写代码的时候鼠标移动到某个标签上,经常会自动弹出一些介绍信息,挡住部分代码,给我们的阅读带来了很大的困难,一直没有找到关闭它的方法,目前可以通过设置时间延迟暂时实现这个效果,如果设置成5000毫秒,甚至可以设置的更大一些,基本上它就不会弹出来了。 "editor.hover.delay": 5000自动保存 目前有四个选项,缺省选项通常是关闭的,只要根据自己的习惯,把“off”替换成其他你习惯的选项即可,如下: off:关闭自动保存。 afterDelay:当文件修改后的时间超过"Files:Auto Save Delay"中配置的值时自动进行保存。 onFocusChange:编辑器失去焦点时自动保存更新后的文件。 onWindowChange:窗口失去焦点时自动保存更新后的文件。 "files.autoSave": "off" 五、VSCode的常用快捷键及特殊按法VS Code的常用快捷键如下,熟练运用,提高效率: 1. 编辑器与窗口管理 Ctrl + Shift + P: 打开命令面板。 Ctrl + Shift + N: 新建窗口。 Ctrl + Shift + W: 关闭窗口。 切分窗口:Ctrl + 1 / Ctrl + 2 / Ctrl + 3 Ctrl + H:最小化窗口 Ctrl + B:显示/隐藏侧边栏 Ctrl + +:放大界面 Ctrl + -:缩小界面 2. 文件操作 Ctrl + N:新建文件 Ctrl + W:关闭文件 Ctrl + Tab:文件切换 3. 格式调整 Ctrl +C / Ctrl + V:复制或剪切当前行/当前选中内容 Alt + Up / Down:向上/下移动一行 Shift + Alt + Up / Down:向上/下复制一行 Ctrl+Delete:删除当前行 Shift + Alt + Left / Right:从光标开始向左/右选择内容 4. 代码编辑 Ctrl + D:选中下一个相同内容 Ctrl + Shift + L:选中所有相同内容 Ctrl + F:查找内容 Ctrl + Shift + F:在整个文件夹中查找内容 大家在读取资料时,可能会发现除了 ctrl + shift + p这类常规的快捷键之外,VS Code还有几类快捷键的按法设置会比较奇怪。 通常的快捷键按法,比如 ctrl + shift + p:一起按下 ctrl ,shift 和 p 键,调出命令帮助菜单 第一种,ctrl + k z:这种快捷键首先需要按下 ctrl 和 k,然后松开按下 z,可以切换 禅模式 第二种,ctrl + k ctrl + o:这种快捷键需要按下 ctrl 和 k,然后 ctrl 不放,松开 k 并按下 o,可以打开文件夹 虽然按VS Code这样设计,可以使快捷键更加丰富,但是对于新手来说无疑是增加了快捷键的上手难度,我们可以根据自己的习惯,通过 ctrl + k ctrl + s 可以自定义快捷键,修改快捷键的设置。 今天先到这里,下一篇,讲一下VB Code的Markdown插件和使用技巧。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |